<template>
    <div>
    <!--查询条件start --111s-->
    <el-form :inline="true"
                :model="query"
                class="query-form"
                size="small">
        <el-form-item label="选择一级分类">
        <el-select v-model="submitJson.topCategoryId"
                    placeholder="请选择一级分类"
                    @change="topchange()"
                    >
            <el-option v-for="(item,index) in category"
                        :key="index"
                        :label="item.topcategoryname"
                        :value="item.topcategoryid">
            </el-option>
        </el-select>
        </el-form-item>

        <el-form-item label="选择二级分类">
        <el-select v-model="submitJson.twoCategoryId"
                    placeholder="请选择二级分类"

                    @change="secondchange()">
            <el-option v-for="(item,index) in busCommoditySecondaryCategoryList"
                        :key="index"
                        :label="item.topcategoryname"
                        :value="item.topcategoryid">
            </el-option>
        </el-select>
        </el-form-item>
            <el-form-item label="选择三级分类">
        <el-select v-model="submitJson.threeCategoryId"
                    placeholder="请选择三级分类"

                    @change="threechange()">
            <el-option v-for="(item,index) in busCommodityThirdCategoryList"
                        :key="index"
                        :label="item.topcategoryname"
                        :value="item.topcategoryid">
            </el-option>
        </el-select>
        </el-form-item>
        <div v-loading="loading">
            <div v-if="submitJson.threeCategoryId">
                <div v-for="(value,key) in submitJson.templateFromList" :key="key">
                    <h3 class="muBanLabel">{{value.templateType | getTemplateTyep}}</h3>
                    <ul>
                    <li>
                        <el-form-item size="medium">
                        <el-input class="muBanName"
                                    v-model="value.name"
                                    size="medium"
                                    autosize
                                    placeholder="输入审核类目名称"></el-input>
                        </el-form-item>
                    </li>
                    <li v-for="(val,k) in value.templateItemFormList"
                        :key="k">
                        <el-form-item>
                            <el-input placeholder="输入审核项名称"
                                    v-model="val.fieldname"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="val.fieldtype"
                                        placeholder="选择类型"
                                        clearable>
                                <el-option v-for="(v,i) in sleType"
                                            :key="i"
                                            :label="v"
                                            :value="v"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-select v-model="val.ismust"
                                        clearable>
                                <el-option :label="'必填'"
                                            :value="0"></el-option>
                                <el-option :label="'非必填'"
                                            :value="1"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                        <el-button @click="addProjectName(value.templateType,key,k)"
                                    class="setBtn"
                                    type="primary"
                                    icon="el-icon-plus"
                                    plain
                                    size="mini"></el-button>
                        <el-button @click="delProjectName(value.templateType,key,k)"
                                    class="setBtn"
                                    type="danger"
                                    icon="el-icon-minus"
                                    plain
                                    size="mini"></el-button>
                        </el-form-item>
                    </li>
                    </ul>
                </div>
            </div>
        </div>
        <el-form-item>
        <el-button type="primary"
                    @click.native="addSubmit()"
                    :loading="loading">提交</el-button>
        </el-form-item>
    </el-form>
    </div>
</template>
<script>
import {
    getTemplateList,
    addOrEditCheckTemplate
} from "../../api/buscommodity/buscommodity.js";
import {
    getCommoditySublevelList,
    getCommodityTopCategoryHDPage
} from "../../api/classification/classification.js";
import Tinymce from "../../components/Tinymce/index.vue";
// import { BASE_URL } from "../../config/app";
const templateFromList = [
    {
        name: "", // 分类名称
        templateType: 1, // 值为1 供应型模板
        templateItemFormList: [
            // 模板数组
            {
                fieldtype: "", // 模板类型
                fieldname: "", // 模板名称
                fieldvalue: "", // 模板名称相对应的值
                ismust: 0 // 必填
            }
        ]
    },
    {
        name: "",
        templateType: 2, // 值为2 营销型模板
        templateItemFormList: [
            {
                fieldtype: "",
                fieldname: "",
                fieldvalue: "",
                ismust: 0
            }
        ]
    },
    {
        name: "",
        templateType: 3, // 值为3 资源型模板
        templateItemFormList: [
            {
                fieldtype: "",
                fieldname: "",
                fieldvalue: "",
                ismust: 0
            }
        ]
    }
];
export default {
    components: {
        Tinymce
    },
    data() {
        return {
            sleType: ["文字", "图片", "数字"],
            loading: true,
            // query: {
            //     //查询条件
            //     content: "",
            //     starttime: "",
            //     endtime: "",
            //     onshelfstatus: "0", //0全部，  1不上架 2上架
            //     recommendstatus: "", //0不推荐1推荐
            //     currentPage: 1,
            //     pageSize: 10,
            //     topcategoryid: "", //一级
            //     secondarycategoryid: "", //二级
            //     thirdcategoryid: "" //三级
            // },
            query: {
                //查询条件
                parentid: null,
                topcategoryname: "",
                currentPage: 1,
                pageSize: 1000,
                level: 1
            },
            //savadd参数list
            category: [], //分类列表
            busCommoditySecondaryCategoryList: [], //二级
            busCommodityThirdCategoryList: [], //三级
            submitJson: {
                topCategoryId: null,
                twoCategoryId: null,
                threeCategoryId: null,
                templateFromList: templateFromList,
                goodsTemplateFormList: templateFromList
            }
        };
    },
    watch: {},
    methods: {
        //一级、】
        topchange() {
            if (this.submitJson.topCategoryId == "") {
                return false;
            }
            let data = {
                topcategoryid: this.submitJson.topCategoryId
            };
            this.loading = true;
            getCommoditySublevelList(data)
                .then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    console.log(response);
                    this.busCommoditySecondaryCategoryList =
                        response.data || [];
                    this.submitJson.twoCategoryId = null;
                    this.submitJson.threeCategoryId = null;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        //二级
        secondchange() {
            if (this.submitJson.twoCategoryId == "") {
                return false;
            }
            this.loading = true;
            console.log(this.submitJson);
            let data = {
                topcategoryid: this.submitJson.twoCategoryId
            };
            getCommoditySublevelList(data)
                .then(response => {
                    if (response.code != 0) {
                        this.$message.error(response.message);
                        return false;
                    }
                    console.log(response);
                    this.busCommodityThirdCategoryList = response.data || [];
                    this.submitJson.threeCategoryId = null;
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        threechange() {
            console.log(this.submitJson);
            if (this.submitJson.threeCategoryId == "") {
                return false;
            }
            this.loading = true;
            const formData = new FormData();
            formData.append("topCategoryId", this.submitJson.topCategoryId);
            formData.append("twoCategoryId", this.submitJson.twoCategoryId);
            formData.append("threeCategoryId", this.submitJson.threeCategoryId);
            getTemplateList(formData)
                .then(response => {
                    console.log(response.data);
                    if (response.code) {
                        this.$message.error(response.message);
                        this.loading = false;
                    }
                    if (response.data.templateFromList.length > 0) {
                        this.submitJson.templateFromList =
                            response.data.templateFromList;
                        console.log(this.submitJson.templateFromList);
                    } else {
                        const list = [
                            {
                                name: "", // 分类名称
                                templateType: 1, // 值为1 供应型模板
                                templateItemFormList: [
                                    // 模板数组
                                    {
                                        fieldtype: "", // 模板类型
                                        fieldname: "", // 模板名称
                                        fieldvalue: "", // 模板名称相对应的值
                                        ismust: 0 // 必填
                                    }
                                ]
                            },
                            {
                                name: "",
                                templateType: 2, // 值为2 营销型模板
                                templateItemFormList: [
                                    {
                                        fieldtype: "",
                                        fieldname: "",
                                        fieldvalue: "",
                                        ismust: 0
                                    }
                                ]
                            },
                            {
                                name: "",
                                templateType: 3, // 值为3 资源型模板
                                templateItemFormList: [
                                    {
                                        fieldtype: "",
                                        fieldname: "",
                                        fieldvalue: "",
                                        ismust: 0
                                    }
                                ]
                            }
                        ];
                        // this.submitJson.goodsTemplateFormList = list;
                        this.submitJson.templateFromList = templateFromList;
                    }
                    if (response.data.goodsTemplateFormList.length > 0) {
                        this.submitJson.goodsTemplateFormList =
                            response.data.goodsTemplateFormList;
                    } else {
                        const list = [
                            {
                                name: "",
                                templateItemFormList: [
                                    {
                                        fieldtype: "",
                                        fieldname: "",
                                        fieldvalue: "",
                                        ismust: 0
                                    }
                                ]
                            }
                        ];
                        this.submitJson.goodsTemplateFormList = templateFromList;
                        // this.submitJson.goodsTemplateFormList = templateFromList;
                    }
                    // let data = response.data.list || [];
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        getCategory() {
            this.loading = true;
            //     getCommodityTopCategoryHDPage(this.query)
            // .then((response) => {
            //   if (response.code) {
            //     this.$message.error(response.message)
            //   }
            //   console.log(response)
            //   this.totalNumber = response.data.totalNumber
            //   this.category = response.data.list || []
            //   setTimeout(() => {
            //     this.loading = false
            //   }, 0.3 * 1000)
            // })
            // .catch(() => {
            //   this.loading = false
            //   this.list = []
            //   this.totalNumber = 0
            // })
            getCommodityTopCategoryHDPage(this.query)
                .then(response => {
                    console.log(response);
                    if (response.code) {
                        this.$message.error(response.message);
                    }
                    let data = response.data.list || [];
                    this.category = data;
                    console.log(data);
                    setTimeout(() => {
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        addCategoryName(type, i) {
            console.log(type, i);
            if (type == 1) {
                !this.isEditable() &&
                    this.submitJson.templateFromList.splice(i + 1, 0, {
                        name: "",
                        templateItemFormList: [
                            {
                                fieldtype: "",
                                fieldname: "",
                                fieldvalue: "",
                                ismust: 0
                            }
                        ]
                    });
            } else {
                !this.isEditable() &&
                    this.submitJson.goodsTemplateFormList.splice(i + 1, 0, {
                        name: "",
                        templateItemFormList: [
                            {
                                fieldtype: "",
                                fieldname: "",
                                fieldvalue: "",
                                ismust: 0
                            }
                        ]
                    });
            }
        },
        addSubmit() {
            //   let data = JSON.stringify(this.submitJson)
            let data = this.submitJson;
            const that = this;
            let isBlank = false;
            if (!this.submitJson.topCategoryId) {
                that.$message({
                    message: "请选择一级分类！",
                    type: "warning"
                });
                return false;
            }
            if (!this.submitJson.twoCategoryId) {
                that.$message({
                    message: "请选择二级分类！",
                    type: "warning"
                });
                return false;
            }
            if (!this.submitJson.threeCategoryId) {
                that.$message({
                    message: "请选择三级分类！",
                    type: "warning"
                });
                return false;
            }
            data = [
                ...this.submitJson.templateFromList
                // ...this.submitJson.goodsTemplateFormList
            ];
            console.log(data);
            for (const key in data) {
                if (data[key].name == "") {
                    that.$message({
                        message: "有未填写的审核类目名称！",
                        type: "warning"
                    });
                    isBlank = true;
                    break;
                }
                for (const k in data[key].templateItemFormList) {
                    if (data[key].templateItemFormList[k].fieldname == "") {
                        that.$message({
                            message: "有未填写的项目名称！",
                            type: "warning"
                        });
                        isBlank = true;
                        break;
                    } else if (
                        data[key].templateItemFormList[k].fieldtype == ""
                    ) {
                        that.$message({
                            message: "有未选的类型！",
                            type: "warning"
                        });
                        isBlank = true;
                        break;
                    }
                }
            }
            if (isBlank) {
                return false;
            }
            this.loading = true;
            addOrEditCheckTemplate(this.submitJson)
                .then(response => {
                    console.log(response);
                    if (response.code) {
                        this.$message.error(response.message);
                        return false;
                    }
                    setTimeout(() => {
                        console.log(response);
                        this.$message.success("提交成功！");
                        this.loading = false;
                    }, 0.3 * 1000);
                })
                .catch(() => {
                    this.loading = false;
                });
        },
        delCategoryName(type, i) {
            if (type == 1) {
                !this.isEditable() &&
                    this.submitJson.templateFromList.length != 1 &&
                    this.submitJson.templateFromList.splice(i, 1);
            } else {
                !this.isEditable() &&
                    this.submitJson.goodsTemplateFormList.length != 1 &&
                    this.submitJson.goodsTemplateFormList.splice(i, 1);
            }
        },
        addProjectName(type, i, k) {
            !this.isEditable() &&
                this.submitJson.templateFromList[i].templateItemFormList.splice(
                    k + 1,
                    0,
                    {
                        fieldtype: "",
                        fieldname: "",
                        fieldvalue: "",
                        ismust: 0
                    }
                );
            // if (type == 1) {
            // } else {
            //     !this.isEditable() &&
            //         this.submitJson.goodsTemplateFormList[
            //             i
            //         ].templateItemFormList.splice(k + 1, 0, {
            //             fieldtype: "",
            //             fieldname: "",
            //             fieldvalue: "",
            //             ismust: 0
            //         });
            // }
        },
        delProjectName(type, i, k) {
            !this.isEditable() &&
                this.submitJson.templateFromList[i].templateItemFormList
                    .length != 1 &&
                this.submitJson.templateFromList[i].templateItemFormList.splice(
                    k,
                    1
                );
            // if (type == 1) {
            // } else {
            //     !this.isEditable() &&
            //         this.submitJson.goodsTemplateFormList[i]
            //             .templateItemFormList.length != 1 &&
            //         this.submitJson.goodsTemplateFormList[
            //             i
            //         ].templateItemFormList.splice(k, 1);
            // }
        },
        isEditable() {
            if (!this.submitJson.topCategoryId) {
                return this.$message({
                    message: "请选择一级分类！",
                    type: "warning"
                });
            }
            if (!this.submitJson.twoCategoryId) {
                return this.$message({
                    message: "请选择二级分类！",
                    type: "warning"
                });
            }
            return false;
        }
    },
    filters: {
        getTemplateTyep(type) {
            let templateName = "供应型";
            switch (type) {
                case 1:
                    templateName = "供应型";
                    break;
                case 2:
                    templateName = "营销型";
                    break;
                case 3:
                    templateName = "资源型";
                    break;
                default:
                    templateName = "供应型";
                    break;
            }
            return templateName;
        }
    },
    created() {
        this.getCategory();
    }
};
</script>
<style type="text/css">
.muBanLabel {
    margin: 20px 0;
    color: #606266;
}
.muBanName.el-input {
    width: 635px;
}
.setBtn.el-button {
    margin-left: 20px;
}
</style>
